<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom操作</title>
</head>
<body>

<img id="light" src="img/off.gif" > <br>

<div class="cls">传智教育</div>   <br>
<div class="cls">黑马程序员</div> <br>

<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>

<script>
    // 1. getElementById：根据id属性值获取，返回一个Element对象
    let light = document.getElementById("light");
    let flag = false;
    light.onclick= function (){
        if (flag){
            light.src = "img/on.gif";
            flag=false;
        }else {
            light.src = "img/off.gif";
            flag = true;
        }
    }
    // 2. getElementsByTagName：根据标签名称获取，返回Element对象数组
    // innerHTML：设置元素内容

    // 3. getElementsByName：根据name属性值获取，返回Element对象数组

    // 4. getElementsByClassName：根据class属性值获取，返回Element对象数组
    let elementsByClassName = document.getElementsByClassName("cls");
    for(let ele of elementsByClassName){
        ele.innerHTML = "<h1>Hello</h1>"
        //ele.innerText = "<h1>Hello</h1>"
    }
</script>
</body>
</html>